Wechat Mini | Note-5

微信小程序开发 Note-5

@ 2018年8月17日 15:15:32

注销接口

@RestController
@Api(value = "LOGIN & REGISTER API", tags = {"LOGIN & REGISTER CONTROLLER"})
public class RegistLoginController extends BasicController {
    
	@ApiOperation(value = "LOGOUT", notes = "LOGOUT API")
	@ApiImplicitParam(name = "userId", value = "用户ID", required = true, dataType = "String", paramType = "query")
	@PostMapping("/logout")
	public IMoocJSONResult logout(String userId) throws Exception {
		redis.del(USER_REDIS_SESSION + ":" + userId);
		return IMoocJSONResult.errorMsg("注销成功");
	}

}

---

注销联调

const app = getApp()
Page({
  data: {
    faceUrl: "../resource/images/noneface.png",
  },
  // 加载
  onLoad: function(params) {
  },
  // 注销
  logout: function(e) {
    var user = app.userInfo;
    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: '注销中',
    });
    // BackEnd
    wx.request({
      url: serverUrl + '/logout?userId=' + user.id,
      method: "POST",
      header: {
        'content-type': 'application/json'
      },
      success: function(res) {
        console.log(res.data);
        wx.hideLoading();
        if (res.data.status == 200) {
          wx.showToast({
            title: '注销成功',
            icon: 'success',
            duration: 2000
          });
          app.userInfo = null;
          // 页面跳转Login
          wx.redirectTo({
            url: '../userLogin/login',
          });
        }
      }
    });
  }
})

---

用户头像接口

@RestController
@Api(value = "USER FUNCTION API", tags = {"USER FUNCTION CONTROLLER"})
@RequestMapping("/user")
public class UserController extends BasicController {	
	@ApiOperation(value = "USER UPLOAD FACE IMG", notes = "USER UPLOAD FACE IMG API")
	@ApiImplicitParam(name = "userId", value = "用户ID", required = true, dataType = "String", paramType = "query")
	@PostMapping("/uploadFace")
	public IMoocJSONResult uploadFace(String userId, @RequestParam("file") MultipartFile[] files) throws Exception {
		// 文件保存的命名空间
		String fileSpace = "D:/videos_dev_face";
		// 保存到数据库中的相对路径
		String uploadPathDB = "/" + userId + "/face";

		FileOutputStream fileOutputStream = null;
		InputStream inputStream = null;

		try {
			if (files != null && files.length > 0) {
				String fileName = files[0].getOriginalFilename();
				if (StringUtils.isNotBlank(fileName)) {
					// 文件上传的最终保存绝对路径
					String finalFacePath = fileSpace + uploadPathDB + "/" + fileName;
					// 设置数据库保存的路径
					uploadPathDB += ("/" + fileName);

					File outFile = new File(finalFacePath);
					if (outFile.getParentFile() != null || !outFile.getParentFile().isDirectory()) {
						// 创建父文件夹
						outFile.getParentFile().mkdirs();
					}
					fileOutputStream = new FileOutputStream(outFile);
					inputStream = files[0].getInputStream();
					IOUtils.copy(inputStream, fileOutputStream);
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			if(fileOutputStream != null){
				fileOutputStream.flush();
				fileOutputStream.close();
			}
		}
		return IMoocJSONResult.ok();
	}

}

---

用户头像联调

wx.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照；

OBJECT参数说明：

参数	类型	必填	说明
count	Number	否	最多可以选择的图片张数，默认9
sizeType	StringArray	否	original 原图，compressed 压缩图，默认二者都有
sourceType	StringArray	否	album 从相册选图，camera 使用相机，默认二者都有
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.uploadFile(OBJECT)

将本地资源上传到开发者服务器，客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data ；

OBJECT参数说明：

参数	类型	必填	说明
url	String	是	开发者服务器 url
filePath	String	是	要上传文件资源的路径
name	String	是	文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
header	Object	否	HTTP 请求 Header, header 中不能设置 Referer
formData	Object	否	HTTP 请求中其他额外的 form data
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

const app = getApp()
Page({
  // 头像上传
  changeFace: function(e) {
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album'],
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);

        wx.showLoading({
          title: '上传中...',
        });

        // 上传
        var serverUrl = app.serverUrl;
        wx.uploadFile({
          url: serverUrl + "/user/uploadFace?userId=" + app.userInfo.id,
          filePath: tempFilePaths[0],
          name: 'file',
          header: {
            'content-type': 'application/json'
          },
          success: function(res) {
            var data = res.data
            console.log(data);
            wx.hideLoading();
            wx.showToast({
              title: '头像上传成功',
              icon:'success',
              duration:3000
            })
          }
        });
      }
    });
  }
})

---

用户头像更新到数据库

// 添加Service
@Service
public class UserServiceImpl implements UserService {
	@Autowired
	private UsersMapper userMapper;

	@Transactional(propagation = Propagation.SUPPORTS)
	@Override
	public void updateUserInfo(Users user) {
		Example userExample = new Example(Users.class);
		Example.Criteria criteria = userExample.createCriteria();
		criteria.andEqualTo("id",user.getId());
		userMapper.updateByExampleSelective(user,userExample);
	}

}

// 修改Controller
@RestController
@Api(value = "USER FUNCTION API", tags = {"USER FUNCTION CONTROLLER"})
@RequestMapping("/user")
public class UserController extends BasicController {
	@Autowired
	private UserService userService;

	@ApiOperation(value = "USER UPLOAD FACE IMG", notes = "USER UPLOAD FACE IMG API")
	@ApiImplicitParam(name = "userId", value = "用户ID", required = true, dataType = "String", paramType = "query")
	@PostMapping("/uploadFace")
	public IMoocJSONResult uploadFace(String userId, @RequestParam("file") MultipartFile[] files) throws Exception {
		if(StringUtils.isBlank(userId)){
			return IMoocJSONResult.errorMsg("用户不存在(无ID)");
		}
		...
		// 上传成功,更新数据库头像信息
		Users user = new Users();
		user.setId(userId);
		user.setFaceImage(uploadPathDB);
		userService.updateUserInfo(user);
		return IMoocJSONResult.ok();
	}
}

---

SpringBoot静态资源配置，显示图片

通过虚拟目录的功能，创建一个配置类，继承WebMvcConfigurerAdapter，重写方法addResourceHandlers；

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
   @Override
   public void addResourceHandlers(ResourceHandlerRegistry registry) {
      registry.addResourceHandler("/**")
      .addResourceLocations("file:D:/xxx/");
   }
}

启动项目后，即可通过访问http://localhost:8081/123/face/imooc.jpg的方式，获取到静态资源文件；

@问题，配置后，http://localhost:8081/swagger-ui.html 无法访问，报404；

需要重新配置；

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/**")
				.addResourceLocations("classpath:/META-INF/resources/")
				.addResourceLocations("file:D:/xxx/");
	}
}

---

小程序展示头像以及手机端调试

现在完成页面访问静态资源文件的功能，既可以完成小程序中展示头像的功能；

在上传完成文件后，并且更新数据库信息，需要给小程序返回相对路径的地址；

@success返回的data并不是JSON格式，而是String类型；

需要将data转换成JSON格式，在小程序前端实现格式化；

success: function(res) {
    var data = JSON.parse(res.data);
    ...
    // 获取返回的头像相对路径
    var imageUrl = data.data;
    me.setData({
        faceUrl: serverUrl + imageUrl
    });
}

使用预览模式，并且打开调试模式，即可完成效果；

---

查询用户信息接口

// Service
@Service
public class UserServiceImpl implements UserService {
	@Autowired
	private UsersMapper userMapper;
    
	@Transactional(propagation = Propagation.SUPPORTS)
	@Override
	public Users queryUserInfo(String userId) {
		Example userExample = new Example(Users.class);
		Example.Criteria criteria = userExample.createCriteria();
		criteria.andEqualTo("id",userId);
		Users user = userMapper.selectOneByExample(userExample);
		return user;
	}
}

// Controller
@RestController
@Api(value = "USER FUNCTION API", tags = {"USER FUNCTION CONTROLLER"})
@RequestMapping("/user")
public class UserController extends BasicController {
	@Autowired
	private UserService userService;

	@ApiOperation(value = "QUERY USER INFORMATION", notes = "QUERY USER INFORMATION API")
	@ApiImplicitParam(name = "userId", value = "用户ID", required = true, dataType = "String", paramType = "query")
	@PostMapping("/query")
	public IMoocJSONResult query(String userId) {
		if (StringUtils.isBlank(userId)) {
			return IMoocJSONResult.errorMsg("用户不存在(无ID)");
		}
		Users userInfo = userService.queryUserInfo(userId);
		UsersVO usersVO = new UsersVO();
		BeanUtils.copyProperties(userInfo, usersVO);

		return IMoocJSONResult.ok(usersVO);
	}
}

---

用户信息展示联调

实现了后台的API后，对小程序进行数据的读取和设置；

const app = getApp()
Page({
  data: {
    faceUrl: "../resource/images/noneface.png",
  },
  // 加载
  onLoad: function() {
    var me = this;
    var user = app.userInfo;
    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: '加载中...',
    });
    // BackEnd
    wx.request({
      url: serverUrl + '/user/query?userId=' + user.id,
      method: "POST",
      header: {
        'content-type': 'application/json'
      },
      success: function(res) {
        console.log(res.data);
        wx.hideLoading();
        if (res.data.status == 200) {
          var userInfo = res.data.data;
          var faceUrl = "../resource/images/noneface.png";
          // 头像判空
          if (userInfo.faceImage != null && userInfo.faceImage != "" && userInfo.faceImage != undefined) {
            faceUrl = serverUrl + userInfo.faceImage;
          }
          // 个人信息设置
          me.setData({
            faceUrl: faceUrl,
            fansCounts: userInfo.fansCounts,
            followCounts: userInfo.followCounts,
            receiveLikeCounts: userInfo.receiveLikeCounts,
            nickname: userInfo.nickname
          });
        }
      }
    });
  }
})

@ 2018年8月17日 22:34:27